import "../../css/adminlte.min.css";
import '../../css/app.css';
import req from '../../utils/request';
//检测用户是否登录
let token = localStorage.getItem('token');
if(!token){
  //如果没有登录, 跳转到登录页面
  location.href = '/login.html';
}
//获取元素

let tbody = document.querySelector('tbody');
let pagination = document.querySelector('.pagination');
let table = document.querySelector('table');
let logoutBtn = document.querySelector('.logout');

//当前页码
let page = 1;

//发送 AJAX 请求获取用户的数据并显示    GET  /admin/user?page=2
async function getUsers(){
  //发送请求 获取用户数据
  let {users, count} = await req.get('/admin/user', {
    params: {
      page: page
    }
  });
  // 遍历数组, 创建 tr 然后插入
  let html = '';
  users.forEach(item => {
    html += `<tr>
              <td>${item._id}</td>
              <td>${item.username}</td>
              <td>
                <img
                  width="30"
                  src="http://127.0.0.1:8081${item.profile}"
                  alt=""
                />
              </td>
              <td>${item.create_time}</td>
              <td>
                <a href="/userEdit.html?id=${item._id}" type="button" class="btn btn-info btn-sm">
                  修改
                </a>
                <button data-username="${item.username}" data-uid="${item._id}" type="button" class="btn btn-danger btn-sm">
                  删除
                </button>
              </td>
            </tr>`
  });
  //设置 tbody 内部的内容
  tbody.innerHTML = html;

  //计算总的页码数
  let totalPage = Math.ceil(count / 10);
  
  //分页字符串
  let pageStr = `<li class="paginate_button page-item ${page === 1 ? 'disabled' : ''}">
                  <a href="#" class="page-link prev">上一页</a>
                </li>`
                
  //循环
  for(let i=1;i<=totalPage;i++){
    pageStr += `<li class='paginate_button page-item ${i === page ? 'active' : ''}'>
                <a href="#" class="page-link num-page">${i}</a>
              </li>`;
  }

  pageStr +=  `<li class="paginate_button page-item ${page === totalPage ? 'disabled' : ''}">
                  <a class="page-link next">下一页</a>
                </li>`
  //设置 pagination 的文本
  pagination.innerHTML = pageStr;
}
//获取用户
getUsers();

//事件委派
pagination.onclick = function(e){
  // div.className = 'active';
  //阻止默认行为
  e.preventDefault();
  //判断元素是否为数字按钮  classList 方便管理元素身上的类名  add 新增类型  remove 移除类名  contains 检测是否包含某个类名
  if(e.target.classList.contains('num-page')){
    //修改页码的变量
    page = Number(e.target.innerHTML);
    //发送请求
    getUsers();
  }

  //判断元素是否为上一页的按钮
  if(e.target.classList.contains('prev')){
    page -= 1;
    getUsers();
  }

  //判断元素是否为下一页的按钮
  if(e.target.classList.contains('next')){
    page += 1;
    getUsers();
  }
}

//为 table 绑定单击事件
table.onclick = async function(e){
  //判断是否为删除按钮
  if(e.target.classList.contains('btn-danger')){
    // console.log(e.target.dataset.uid) // dataset 用来获取 DOM 元素身上 `data-` 类型的数据
    let id = e.target.dataset.uid;
    //执行删除操作
    await req.delete('/admin/user/' + id);
    alert('删除成功');
    //更新数据列表
    getUsers();
  }
}

//退出登录
logoutBtn.onclick = function(){
  localStorage.removeItem('token');
  //跳转到登录页面
  location.href = '/login.html';
}